<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>文章列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="${base}/js/lib/extjs/resources/css/ext-all.css"/>
	<script type="text/javascript" src="${base}/js/lib/extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="${base}/js/lib/extjs/ext-all-debug.js"></script>
	<script type="text/javascript" src="${base}/js/lib/extjs/ext-lang-zh_CN.js"></script>
  </head>
  
  <body>
    <script type="text/javascript">
	Ext.onReady(function() {
	    var proxy = new Ext.data.HttpProxy({
	        url: '${base}/admin/article/list.do',
	        method: 'POST'
	    });
	
	    var reader = new Ext.data.JsonReader(
	    { root: 'dataset', totalProperty: 'count' },
	        [
				{ name: 'id'},
				{ name: 'subject'},
				{ name: 'clickCount'},
				{ name: 'commentCount'},
				{ name: 'author'},
				{ name: 'source'},
				{ name: 'published'},
				{ name: 'containImage'},
				{ name: 'pageCount'},
				{ name: 'categoryName'},
				{ name: 'tags'},
				{ name: 'publishTime'}
	        ]
	    );
	
	    var store = new Ext.data.Store(
	        { proxy: proxy, reader: reader }
	    );
	
	    // create the Grid
	    var selM = new Ext.grid.CheckboxSelectionModel({  
	        dataIndex: "id"  
	    });
	    var datetimeRenderer = function(value){
			if(value && typeof value === "number") {
				var date = new Date(value);
				return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDay()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
			}
	    }
	    var trueFalseRenderer = function(value){
	    	if(value && typeof value === "boolean") {
	    		return value?"是":"否";
	    	}
	    }
	    var colM = new Ext.grid.ColumnModel([
  			selM,
  			{ id: 'id', name: 'id', header: "文章ID", width: 30, height:80, sortable: true, dataIndex: 'id'},
  			{ id: 'subject', name: 'subject', header: "标题", width: 40, height:80, dataIndex: 'subject'},
  			{ id: 'clickCount', name: 'clickCount', header: "点击数", width: 60, height:80, dataIndex: 'clickCount'},
			{ id: 'commentCount', name: 'commentCount', header: "评论数", width: 60, height:80, dataIndex: 'commentCount'},
  			{ id: 'author', name: 'author', header: "作者", width: 50, height:80, dataIndex: 'author'},
  			{ id: 'source', name: 'source', header: "来源", width: 50, height:80, dataIndex: 'source'},
  			{ id: 'published', name: 'published', header: "是否发布", width: 20, height:80, dataIndex: 'published',renderer: trueFalseRenderer},
  			{ id: 'containImage', name: 'containImage', header: "是否有图", width: 50, height:80, dataIndex: 'containImage',renderer: trueFalseRenderer},
  			{ id: 'pageCount', name: 'pageCount', header: "页数", width: 50, height:80, dataIndex: 'pageCount'},
  			{ id: 'categoryName', name: 'categoryName', header: "分类名", width: 50, height:80, dataIndex: 'categoryName'},
  			{ id: 'tags', name: 'tags', header: "标签", width: 50, height:80, dataIndex: 'tags'},
  			{ id: 'publishTime', name: 'publishTime', header: "发布时间", width: 50, height:80, dataIndex: 'publishTime',renderer: datetimeRenderer}
  		]);
		
		var sform = new Ext.FormPanel({//这里是搜索表单
	        buttonAlign:'left',
	       	height:140,
	        labelWidth:70,
	        region:'north',
	        frame:true,
	        title: '文章列表',
	        items: [{
	                layout:'column',
	                items:[{
	                    layout: 'form',
	                    items: [{
	                        xtype:'textfield',
	                        fieldLabel: '文章标题',
	                        id: 'subject',
	                        name: 'subject'
	                    }]
	                },{
	                    layout: 'form',
	                    items: [{
	                        xtype:'textfield',
	                        fieldLabel: '文章概要',
	                        id: 'summary',
	                        name: 'summary'
	                    }]
	                },{
	                    layout: 'form',
	                    items: [{
	                        xtype:'datefield',
	                        fieldLabel: '发布时间（起）',
	                        name: 'publishTimeMin',
	                        id: 'publishTimeMin',
	                        format:'Y-m-d'
	                    }]
	                },{
	                    layout: 'form',
	                    items: [{
	                        xtype:'datefield',
	                        fieldLabel: '发布时间（止）',
	                        name: 'publishTimeMax',
	                        id: 'publishTimeMax',
	                        format:'Y-m-d'
	                    }]
	                }]
	            },{
                    layout: 'form',
                    items: [{
                        xtype:'combo',
                        fieldLabel:'分类',
                        name: 'category',
                        id: '_category',
                        store : new Ext.data.SimpleStore({  
				            fields : ['value', 'text'],  
				            data : []
				        }),
                        hiddenName:"category",
				        mode:'local',
				        valueField : 'value',
				        displayField : 'text',
				        emptyText : '请选择',
				        mode : 'local',
				        triggerAction : 'all',  
				        readOnly : false,
				        editable:false
                    }]
                }
	        ],
	        buttons: [{
	            text: '查询',
	            handler:function(){
	            	var condition = Ext.encode(sform.getForm().getValues());
					store.load({
						params:{
							"start":0,
							"limit":15,
							"jCondition":condition
						}
					});
	            }
	        },{
	            text: '重置',
	            handler:function(){sform.form.reset();}
	        }]
	    });
    
		var doReset = function(){
			Ext.getCmp("subject").setValue("");
			Ext.getCmp("summary").setValue("");
			Ext.getCmp("_roleName").setValue("");
			Ext.getCmp("publishTimeMin").setValue("");
			Ext.getCmp("publishTimeMax").setValue("");
			Ext.getCmp("_category").setValue("");
		}
		
	    var grid = new Ext.grid.GridPanel({
	    	id: "gridPanel",
	        store: store,
	        sm: selM,
	        cm: colM,
	        region:"center",
	        layout: "fit",
	        stripeRows: true,
	        autoScroll : true,
	        autoWidth : true, 
	        autoHeight : true, 
	        loadMask: {msg: '正在加载数据，请稍侯……'},
	        viewConfig:
	        {
	            columnsText: '列',
	            sortAscText: '升序',
	            sortDescText: '降序',
				forceFit: true
	        },
			tbar: new Ext.Toolbar({
				items:[
	                {
	                    id:'buttonAdd',
	                    text:"添加",
	                    handler: function(){
	                    	window.open("${base}/admin/article/add.do");
	                    }
	                },{
	                    id:'buttonUpdate',
	                    text:"修改",
	                    handler: function(){
	                    	var id = null;
	                    	window.open("${base}/admin/article/update.do?id="+id);
	                    }
	                },{
	                    id:'buttonDelete',
	                    text:"删除",
	                    handler: function(){
	                    	alert("You clicked Button A"); 
	                    }
	                }
            	]
        	}),
	        bbar: new Ext.PagingToolbar({
	            pageSize: 15,
	            store: store,
	            displayInfo: true,
	            displayMsg: '总记录数 {0} - {1} of {2}',
	            emptyMsg: "没有记录"
	        })
	    });
		var viewport = new Ext.Viewport({
        	layout:'border',
	        items:[
	        	sform,
	            grid
	        ]}
		);
	    viewport.render(document.body);        
	    store.load({ params: { start: 0, limit: 15} });
	    //加上这一句，否则一翻页查询条件就丢失了
	    store.on('beforeload',function(){
	        Ext.apply(
	        this.baseParams,
	        {
	           "jCondition":Ext.encode(sform.getForm().getValues())
	        });
	    });
	    
	});
    </script>
  </body>
</html>